import React, { Component } from 'react'
import { CSSTransition } from "react-transition-group"
import { connect } from 'react-redux'
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    SearchWrapper,
    Addition,
    Button,
} from './style'
class Header extends Component {
    // constructor (props) {
    //     super(props);
    //     this.inputHandleFocus = this.inputHandleFocus.bind(this);
    //     this.inputHandleBlur = this.inputHandleBlur.bind(this);
    // }
    render () {
        return (
            <HeaderWrapper>
                <Logo></Logo>
                <Nav>
                    <NavItem className="left">首页</NavItem>
                    <NavItem className="left">下载App</NavItem>
                    <NavItem className="right">登陆</NavItem>
                    <NavItem className="right"><i className="iconfont">&#xe636;</i></NavItem>
                    <SearchWrapper>
                        <CSSTransition 
                            in={this.state.focused}
                            timeout={200}
                            classNames="slide"
                        >
                            <NavSearch className={this.state.focused ? 'focused' : ''}
                            onFocus={this.inputHandleFocus}
                            onBlur={this.inputHandleBlur}
                            ></NavSearch>
                        </CSSTransition>
                        <i className={this.state.focused ? 'focused iconfont' : 'iconfont'}>&#xe608;</i>
                    </SearchWrapper>
                </Nav>
                <Addition>
                    <Button className="writting"><i className="iconfont">&#xe608;</i>写文章</Button>
                    <Button className="reg">登陆</Button>
                </Addition>
            </HeaderWrapper>
        )
    }

    // inputHandleFocus () {
    //     this.setState({
    //         focused: true
    //     })
    // }

    // inputHandleBlur () {
    //     this.setState({
    //         focused: false
    //     })
    // }
}

const mapStateToProps = (state) => {
    focused: state.focused
}

const mapDispathtoProps = (dispatch) => {

}

export default connect(mapStateToProps, mapStateToProps)(Header)


